<template>
	<view class="content" :style="{backgroundImage:`url(${site_config.front_background})`}" v-if="site_config">
		 <status-bar title=' ' hideBg="1" statusHeight backColor :back="back"></status-bar>
		<view class="Box " :style="{backgroundImage:`url(${site_config.front_background_outer})`}">
		
				<scroll-view scroll-y="true" class="scrollView" @scroll="Scroll">
				<movable-area class="movable-area" :style="{height:bgImgHeight+'rpx'}" :scale-area="true">
					<movable-view class="movable-view"   :out-of-bounds="false" direction="all"
					   :scale="true" :scale-min="1" :scale-value="scaleValue" :disabled="Disabled"
					   @scale="scaleView" >
				
					  <view class="list" v-for="(item,index) in site_location" :key="index"
						:style="{width:item.width+'rpx',height:item.height+'rpx',
							   left:item.x+'rpx',top:item.y+'rpx'}" 
						@click="selectTab(item)">
						<image :src="$imgUrls(item.choose_log)" class="list_img" v-if="item.select == 1"></image>
						<block v-else>
						 <image :src="$imgUrls(item.empty_log)" class="list_img" 
						 v-if="item.order_state == 0 || item.order_state == 2"></image>
						 <image :src="$imgUrls(item.order_log)" class="list_img" v-if="item.order_state == 1"></image>
						</block>
					  </view>
					  
					
					<image :src="$imgUrls(site_config.background)" mode="widthFix" class="rows"></image>
				   </movable-view>
				</movable-area>
			
				</scroll-view>
		
			  <view class="box_Tip ">
				  <view class="type_config " v-for="(item,index) in type_config" :key="item.id">
					  <image :src="$imgUrls(item.empty_log)" class="type_config_log"></image>
					  <text class="type_config_name">{{item.type_name}}</text>
				  </view>
			  </view>
		</view>
		
		
		<view class="footer">
			<view class="details">
				<view class="d-flex a-center">
					<text class="details_txt">{{details.open_date}}</text>
					<text class="open_time details_txt">{{details.open_time}}</text>
					<text class="details_txt">{{details.name}}</text>
				</view>
				<view class="d-flex a-center">
					<text class="details_txt">预约妆造 余位：</text>
					<text class="details_txt">{{details.make_up_num}}/{{details.make_up_num_total}}</text>
				</view>
			</view>
			
			
				<scroll-view scroll-x="true" class="rows nowrap m-top14" v-if="selectArr.length">
					<view class="tableList" 
					    v-for="(item,index) in selectArr" :key="index">
						<text class="tableList_name">{{item.type_name}}-{{item.name}}</text>
						<view class="black h7 m-top4">￥{{item.site_price}}</view>
					</view>
					
				</scroll-view>
				
			
			<view class="Givemoney" v-if="selectArr.length">
				<view class="MoneyBox">
					<view class="d-flex a-center">
						<text class="Earnest">定金</text>
						<text class="EarnestMoney">￥{{priceObj.order_price}}</text>
					</view>
					<view class="d-flex a-center">
						<text class="Copewith">应付金额</text>
						<text class="CopewithMoney">￥{{priceObj.site_price}}</text>
					</view>
				</view>
				<view class="continum" @click="chooseSite">确认并支付定金</view>
			</view>
			
			<view class="Make_btn" v-else >请选择座席</view>
			
		</view>
		
		<u-modal :show="show" title="温馨提示" 
		      :content='site_config.tel_desc' 
			  :closeOnClickOverlay="true"
			  confirmText="立即联系" 
			  confirmColor="#e0bb71"
			  @close="show = false" @confirm="Confirm"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scaleValue:1,
				details:'',
				id:'',
				type_config:[],
				site_config:'',
				site_location:[],
				selectArr:[],
				Disabled:true,
				priceObj:'',
				show:false,
			}
		},
		onLoad(opt) {
		  if(opt.id) this.id = opt.id;
		   this.getSiteTimeDetail();
		},
		
		methods: {
			
			getSiteTimeDetail(){
				this.$showLoading('');
				this.$http.get({
					url:'/SiteApi/getSiteTimeDetail',
					data:{
						id:this.id,
					}
				}).then(res=>{
					this.$hideLoading();
					if(res.code != 200) return this.$Toast(res.msg);
					const Result = res.data;
					this.details = Result;
					this.site_config = Result.site_config;
					Result.site_location.forEach(item=>{
						item.width = Math.round(Number(Result.site_config.width)*0.72);
						item.height = Math.round(Number(Result.site_config.height)*0.72);
						item.x = Math.round(Number(item.x)*0.72);
						item.y = Math.round(Number(item.y)*0.72);
						let userItem = Result.type_config.find(n=>n.id == item.site_type);
						if(userItem){
							item.empty_log = userItem.empty_log;
							item.choose_log = userItem.choose_log;
							item.order_log = userItem.order_log;
							item.type_name = userItem.type_name;
						}
					})
					this.site_location = Result.site_location;
					this.type_config = Result.type_config || [];
				})
			},
			selectTab(item){
				if(this.scaleValue == 1) this.scaleValue = 1.5;
				if(item.order_state == 1) return this.$Toast('该座位已被预约，请重新选择');
				if(item.order_state == 2) return;
				if(item.tel == 1) return this.show = true; 
				const Flag = this.containsObjectWithData(this.selectArr,'id',item.id);
				const Index = this.site_location.findIndex(n=>n.id == item.id);
				if(Flag){
					const selectIndex = this.selectArr.findIndex(n=>n.id == item.id);
					this.selectArr.splice(selectIndex,1);
					this.site_location[Index].select = 0;
				}else{
					this.selectArr.push(item);
					this.site_location[Index].select = 1;                
				}
				if(this.selectArr.length) this.getSitePriceInfo();
			},
			
			getSitePriceInfo(){
				let site_ids = [];
				this.selectArr.forEach(item=>{
					site_ids.push(item.id)
				})
				this.$http.get({
					url:'/SiteApi/getSitePriceInfo',
					data:{
						site_id:site_ids.join(','),
						time_id:this.id,
					}
				}).then(res=>{
					if(res.code != 200) return this.$Toast(res.msg);
					const Result = res.data;
					this.priceObj = Result;
				})
			},
			
			chooseSite(){
				if(!this.selectArr.length) return;
				this.$showLoading('座位锁定中~');
				let site_ids = [];
				this.selectArr.forEach(item=>{
					site_ids.push(item.id)
				})
				this.$http.post({
					url:'/SiteApi/chooseSite',
					data:{
						site_id:site_ids.join(','),
						time_id:this.id,
					}
				}).then(res=>{
					this.$hideLoading();
					if(res.code != 200) return this.$Toast(res.msg);
					if(res.data) this.toUrl(`orderDetails?order_id=${res.data}`) 
				})
			},
			
			scaleView(e){
				const scale = e.detail.scale;
				scale > 1?this.Disabled = false:this.Disabled = true;
			},
			Scroll(e){
				// console.log(e,'1');
			},
			
			
			containsObjectWithData(objects, key, value){
				 return objects.some(obj => obj[key] === value);  
			},
			
			Confirm(){
				this.$common.Tel(this.site_config.tel);
			}
			
		},
		
		computed:{
			bgImgHeight(){
				if(!this.site_config) return;
				return Math.round(Number(this.site_config.img_h) * 0.72)
			}
		},
		watch:{
			scaleValue(newVal,oldVal){
				if(newVal && newVal > 1) {
					this.Disabled = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.content{
		width:100%;
		height: 100vh;
		box-sizing: border-box;
		background-size: cover;  
		background-position: center; 
		padding:50rpx 0 200rpx 0;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background-color: #4a3721;
	}
	.Box{
		width:690rpx;
		height:100%;
		margin:0 auto;
		box-sizing: border-box;
		background-size: 100% 100%;  
		background-position: center;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		// justify-content: space-between;
		
	}
	.box_Ten{
		width:540rpx;
		// flex:1;
		margin:80rpx auto 0;
		overflow: scroll;
		position: relative;
		text-align: center;
	}
	
	.scrollView{
		width:540rpx;
		height:80%;
		margin:80rpx auto 0;
		z-index:9999;
	}
	.Tanine{
		width:100%;
		
	}
	.Tanine_in{
		width:100%;
		height: 1000rpx;
	}
	.movable-area{
		width:100%;
		height: 100%;
		box-sizing: border-box;
		position: relative;
		z-index:8988;
	}
	.movable-view{
		width:100%;
		height:100%;
	}
	.list{
		position: absolute;
		z-index:10;
	}
	.list_img{
		width:100%;
		height: 100%;
		position: absolute;
		top:0;
		left:0;
	}
	.boxBgimg{
		width:750rpx;
		height:1349rpx;
	}
	// .boxBgimg{
	// 	width:750rpx;
	// 	height:1349rpx;
	// }
	
	.box_Tip{
		width:550rpx;
		// height: 20%;
		margin:0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.type_config{
		width:25%;
		margin-top:10rpx;
		display: flex;
		justify-content: center;
	}
	.type_config_log{
		width:28rpx;
		height: 28rpx;
	   display: inline-block;
	}
	.type_config_name{
		font-size:22rpx;
		margin-left:4rpx;
		 display: inline-block;
	}
	.footer{
		width:690rpx;
		position: fixed;
		bottom: 0;
		left:30rpx;
		z-index:1000;
		padding:30rpx;
		background-color: #ffe6bd;
		border-radius: 20rpx 20rpx 0 0;
		border:4rpx solid #846144;
		border-bottom: none;
		display: flex;
		flex-direction: column;
	}
	.details{
		display: flex;
		justify-content: space-between;
		align-items: center;
		color:#000;
		
	}
	.details_txt{
		font-size:22rpx;
	}
	.open_time{
		margin:0 8rpx;
	}
	.Make_btn{
		width:100%;
		height: 70rpx;
		background-color: #e0bb71;
		color:#000;
		font-size:26rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top:30rpx;
		border-radius: 10rpx;
	}
	.tableList{
		background-color: #eccb95;
		padding:4rpx 16rpx;
		border-radius: 6rpx;
		margin-right:10rpx;
		display: inline-block;
		
	}
	.tableList_name{
		color:#000;
		font-size:22rpx;
	}
	.Givemoney{
		width:100%;
		display: flex;
		justify-content: space-between;
		margin-top:30rpx;
	}
	.MoneyBox{
		display: flex;
		flex-direction: column;
	}
	.Earnest{
		color:#db6e5a;
		font-size:22rpx;
		margin-right:4rpx;
	}
	.EarnestMoney{
		color:#c41e19;
		font-size:34rpx;
		font-weight: bold;
	}
	.Copewith{
		color:#333;
		font-size:22rpx;
		margin-right:4rpx;
	}
	.CopewithMoney{
		color:#000;
		font-size:28rpx;
		font-weight: bold;
	}
	.continum{
		width:260rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size:24rpx;
		color:#333;
		border-radius: 35rpx;
		background-color: #d7b06d;
		border:4rpx solid #a17e4f;
	}
</style>
